<template>
    <div class="geo-location">
        <input type="search" name="" id="" v-model="city"
        placeholder="请输入城市名称" @change="getData()">
    </div>
</template>
<script>
import axios  from 'axios';
import{KEY,API_CITY}from"../common/constrant";
import { mapActions } from 'vuex';
// import { mapMutations } from 'vuex';
export default{
    data(){
        return{
            "city":""
        }
    },
    methods:{
        // ...mapMutations([
        //     "updateLocationMutation"
        // ]),
        ...mapActions([
            "updataLocationAction"
        ]),
        getData(){
        axios.get(API_CITY,{
            params:{
                key:KEY,
                location:this.city
            }
        }).then(res=>{
            console.log(res.data)
            // this.$store.commit("updateLocationMutation",res.data.location[0])
            // this.updateLocationMutation(res.data.location[0])
            this.updataLocationAction(res.data.location[0])
            console.log( this.$store.state.location)
        })
        }
    },
    // mounted(){
    //     this.getData()
    // }
}
</script>
<style scoped>
</style>